import React, { Component } from "react";
// props是父组件传递给子组件的自定义属性
// props是具有响应式的
// 也要遵循单向数据流，子组件是不能直接修改props的值的

class Child1 extends Component {
  render() {
    // 类组件是通过this.props来接受父组件的传值
    // console.log(this);
    const { name, age } = this.props;
    return (
      <div>
        {/* child1组件 - {this.props.name} - {this.props.age} */}
        child1组件 - {name} - {age}
      </div>
    );
  }
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.props.age = 30;
  //   }, 3000);
  // }
}

// 函数组件通过props参数来获取父组件的传值
// const Child2 = (props) => {
//   // console.log(props);
//   return <div>child2组件 - {props.count}</div>;
// };
const Child2 = ({ count }) => {
  return <div>child2组件 - {count}</div>;
};

class App extends Component {
  state = {
    name: "zhangsan",
  };
  render() {
    return (
      <>
        <h2>props</h2>
        <Child1 name={this.state.name} age="20" />
        <Child2 count="10" />
      </>
    );
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        name: "lisi",
      });
    }, 2000);
  }
}

export default App;
